<template>
  <div class="seller-container">
    <div class="seller-chart" ref="chartRef"></div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'Seller',
  data() {
    return {
      chartInstance: null,
      allData: null, // 服务器返回的数据
      currentPage: 1, // 当前页数
      totalPage: 0, // 总页数
      timer: null, // 定时器标识
    }
  },
  computed: {
    ...mapState(['theme'])
  },
  watch: {
    theme() {
      // 主题改变时，销毁当前图表
      this.chartInstance.dispose()
      // 以最新的主题初始化图表
      this.initChart()
      this.screenAdapter()
      this.updateChart()
    }
  },
  created() {
    this.$socket.registerCallBack('sellerData', this.getData)
  },
  mounted() {
    this.initChart()
    //this.getData()
    this.$socket.send({
      action: 'getData',
      socketType: 'sellerData',
      chartName: 'seller',
      value: ''
     })
    // 监听浏览器窗口的改变
    window.addEventListener('resize', this.screenAdapter)
    // 首次进入页面调用echarts的窗口事件进行适配
    this.screenAdapter()
  },
  destroyed() {
    clearInterval(this.timer)
    window.removeEventListener('resize',this.screenAdapter)
    this.$socket.unRegisterCallBack('sellerData')
  },
  methods: {
    // 初始化echarts实例对象
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.chartRef, this.theme)
      // 初始化option的配置
      const initOption = {
        title: {
          text: '┃ 商家销售统计',
          left: 20,
          top: 20,
        },
        // 坐标轴位置
        grid: {
          top: '20%',
          left: '2%',
          right: '6%',
          bottom:'3%',
          containLabel: true, // 坐标轴包含坐标轴文字一起移动
        },
        tooltip: {
          trigger: 'axis', // 触发时机
          // 展示的样式
          axisPointer: {
            type: 'line',
            z: 0, // 样式层级
            lineStyle: {
              color: '#2d3443'
            }
          }
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
        },
        series: [
          {
            type: 'bar',
            label: {
              show: true, // 展示数据
              position: 'right',
              textStyle: {
                color: 'white'
              }
            },
            itemStyle: {
              // 前四个参数确定颜色渐变的方向，最后的参数确定不同百分比下的值
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: '#5052ee'
                },
                {
                  offset: 1,
                  color: '#ab6ee5'
                },
              ])
            }
          }
        ]
      }
      this.chartInstance.setOption(initOption)
      this.chartInstance.on('mouseover', () => {
        clearInterval(this.timer)
      })
      this.chartInstance.on('mouseout', () => {
        this.pageInterval()
      })
    },
    
    // 获取图表的数据
    getData(result) {
      //const result = await this.$http.get('seller')
      this.allData = result
      // 将数据从小到大排序
      this.allData.sort((a, b) => {
        return a.value - b.value
      })
      // 5个数据为1页,计算总页数
      this.totalPage = Math.ceil(this.allData.length / 5)
      this.updateChart()
      this.pageInterval()
    },

    // 更新图表
    updateChart() {
      // 只展示5条数据
      const start = (this.currentPage - 1) * 5
      const end = this.currentPage * 5
      const showData = this.allData.slice(start, end)
      // y轴的值
      const sellerNames = showData.map(item => {
        return item.name
      })
      // x轴的值
      const sellerValues = showData.map(item => {
        return item.value
      })
      // 获取数据option的配置
      const dataOption = {
        yAxis: {
          data: sellerNames
        },
        series: [
          {
            data: sellerValues
          }
        ]
      }
      this.chartInstance.setOption(dataOption)
    },

    // 图表分页的定时器
    pageInterval() {
      if(this.timer) {
        clearInterval(this.timer)
      }
      this.timer = setInterval(() => {
        this.currentPage++
        if(this.currentPage > this.totalPage) {
          this.currentPage = 1
        }
        this.updateChart()
      }, 3000)
    },

    // 浏览器窗口改变事件
    screenAdapter() {
      const adapterFontSize = this.$refs.chartRef.offsetWidth / 100 * 3.6
      // 屏幕适配的option配置
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: adapterFontSize
          },
        },
        tooltip: {
          // 展示的样式
          axisPointer: {
            lineStyle: {
              width: adapterFontSize,
            }
          }
        },
        series: [
          {
            barWidth: adapterFontSize,
            itemStyle: {
              // 控制四个角的圆角样式
              barBorderRadius: [0, adapterFontSize / 2, adapterFontSize / 2 ,0],
            }
          }
        ]
      }
      this.chartInstance.setOption(adapterOption)
      // 需要再调用echarts实例的窗口事件图表才会有效果
      this.chartInstance.resize()
    },
  },
}
</script>

<style scoped>

</style>